<script>
  /*
   * @Author: wzh 
   * @Date: 2021-06-14 19:56:26 
   * @Last Modified by: 1521620993@qq.com
   * @Last Modified time: 2021-06-14 19:56:26 
   */
</script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单选框实现分段Tab切换标签</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="container">
    <div class="segmented-control">
      
      <input type="radio" name="tab" value="1" id="tab-1" checked/>
      <label for="tab-1" class= "segmented-control__1">
        <p>Tab 1</p>
      </label>
      
      <input type="radio" name="tab" value="2" id="tab-2" />
      <label for="tab-2" class= "segmented-control__2">
        <p>Tab 2</p>
      </label>
      
      <input type="radio" name="tab" value="3" id="tab-3" />
      <label for="tab-3" class= "segmented-control__3">
        <p>Tab 3</p>
      </label>
      
      <div class="segmented-control__color"></div>
    </div>
  </div>
</body>
</html>